/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
.clearfix:after { content: ""; display: table; clear: both; }
html { height: 100%; font: 12px/150% Arial, Verdana, "微软雅黑";}
body { font-family: 'Lato', Calibri, Arial, sans-serif; background: #fff; font-weight: 300; font-size: 15px; color: #333; -webkit-font-smoothing: antialiased; overflow-y: scroll; overflow-x: hidden; }
a { color: #555; text-decoration: none; }
.container { width: 100%; }
.clr { clear: both; padding: 0; height: 0; margin: 0; }
.main { width: 100%; height:370px; padding:20px 0; margin: 0 auto;  background: url('../assets/images/bg.jpg') no-repeat top center;
    -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;}
.container > header { margin: 2% 30px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2);}
.container > header .logo{width:70%; margin:0 auto;}
.container > header h1 {  font-size: 30px; line-height: 38px; margin: 0; position: relative; font-weight:bold; color: #666; text-shadow: 0 1px 1px rgba(255,255,255,0.6); }
.container > header h2 { font-size: 16px; font-weight: 300; margin: 0; padding: 15px 0 5px 0; color: #666; font-weight:bold; text-shadow: 0 1px 1px rgba(255,255,255,0.6); }
/* Header Style */
.codrops-top { line-height: 24px; font-size: 11px; background: #fff; background: rgba(255, 255, 255, 0.8); text-transform: uppercase; z-index: 9999; position: relative; font-family: Cambria, Georgia, serif; box-shadow: 1px 0px 2px rgba(0,0,0,0.2); }
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */

.codrops-top:before, .codrops-top:after { content: " "; /* 1 */ display: table; /* 2 */ }
.codrops-top:after { clear: both }
.codrops-top a { padding: 0px 10px; letter-spacing: 1px; color: #333; display: inline-block; }
.codrops-top a:hover { background: rgba(255,255,255,0.6); }
.codrops-top span.right { float: right; }
.codrops-top span.right a { float: left; display: block; }
/* Demo Buttons Style */
.codrops-demos { text-align: center; display: block; line-height: 30px; padding: 5px 0px; }
.codrops-demos a { display: inline-block; margin: 0px 4px; padding: 0px 6px; color: #8c8c8c; line-height: 20px; font-size: 12px; font-weight: 700; text-shadow: 1px 1px 1px #fff; border: 1px solid #fff; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* W3C */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.codrops-demos a:hover { color: #333; background: #fff; }
.codrops-demos a:active { background: #fff; }
.codrops-demos a.current-demo, .codrops-demos a.current-demo:hover { background: #555; border-color: #555; color: #ddd; text-shadow: 0 1px 1px rgba(0,0,0,0.5); box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.5); }
.support-note span { color: #ac375d; font-size: 16px; display: none; font-weight: bold; text-align: center; padding: 5px 0; }

/* Demo 4 */
.form-4 { /* Size and position */
    width: 800px; margin: 0 auto; position: relative; /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif; color: white; text-shadow: 0 2px 1px rgba(0,0,0,0.3); }
.form-4 h1 { font-size: 22px; padding-bottom:10px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); text-align:center; color:#333;}
.form-4 input[type=text], .form-4 input[type=password] { /* Size and position */
    height:35px; padding: 8px 4px 8px 10px; margin-bottom: 15px; /* Styles */
    border: 1px solid #4e3043; /* Fallback */ border: 1px solid rgba(43,147,218, 0.8); background: rgba(0,0,0,0.3); border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,0.2),  inset 0 1px 1px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; /* Font styles */
    color: #fff; font-size: 13px; }

/* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */

.form-4 input::-webkit-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.form-4 input:-moz-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.form-4 input:-ms-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.form-4 input[type=text]:hover, .form-4 input[type=password]:hover { border-color: #333; }
.form-4 input[type=text]:focus, .form-4 input[type=password]:focus, .form-4 input[type=button]:focus { box-shadow: 0 1px 0 rgba(255,255,255,0.2),  inset 0 1px 1px rgba(0,0,0,0.1),  0 0 0 3px rgba(255,255,255,0.15); outline: none; }
.form-4 .full{width:100%;}
.form-4 .captchas{width:150px;}
.form-4 .captchas-img{float:right; width:94px; height:37px;}
/* Fallback */
.no-boxshadow .form-4 input[type=text]:focus, .no-boxshadow .form-4 input[type=password]:focus { outline: 1px solid white; }
/*.form-4 button[type=submit] { !* Size and position *!*/
/*width: 100%; padding: 8px 5px; !* Styles *!*/
/*background: #634056; background: -moz-linear-gradient(rgba(80,160,214,0.5), rgba(43,147,218, 0.7));*/
/*background: -ms-linear-gradient(rgba(80,160,214,0.5), rgba(43,147,218, 0.7));*/
/*background: -o-linear-gradient(rgba(80,160,214,0.5), rgba(43,147,218, 0.7));*/
/*background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(80,160,214,0.5)), to(rgba(43,147,218, 0.7))); background: -webkit-linear-gradient(rgba(80,160,214,0.5), rgba(43,147,218, 0.7)); background: linear-gradient(rgba(80,160,214,0.5), rgba(43,147,218, 0.7));*/
/*border-radius: 5px;*/
/*border: 1px solid #2b93da;*/
/*box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px 1px rgba(0,0,0,0.1);*/
/*cursor: pointer;*/
/*-webkit-transition: all 0.3s ease-out;*/
/*-moz-transition: all 0.3s ease-out;*/
/*-ms-transition: all 0.3s ease-out;*/
/*-o-transition: all 0.3s ease-out;*/
/*transition: all 0.3s ease-out; !* Font styles *!*/
/*color: white;*/
/*text-shadow: 0 1px 0 rgba(0,0,0,0.3); font-size: 16px; font-weight: bold; font-family: 'Raleway', 'Lato', Arial, sans-serif; }*/
/*.form-4 button[type=submit]:hover { box-shadow: inset 0 1px rgba(255,255,255,0.2),  inset 0 20px 30px rgba(80,160,214,0.5); }*/
/* Fallback */
.ceshis { /* Size and position */
    width: 100%; padding: 8px 5px;
    margin-top: 10px;/* Styles */
    background: #634056; background: -moz-linear-gradient(rgba(80,160,214,0.5), rgba(43,147,218, 0.7));
    background: -ms-linear-gradient(rgba(80,160,214,0.5), rgba(43,147,218, 0.7));
    background: -o-linear-gradient(rgba(80,160,214,0.5), rgba(43,147,218, 0.7));
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(80,160,214,0.5)), to(rgba(43,147,218, 0.7))); background: -webkit-linear-gradient(rgba(80,160,214,0.5), rgba(43,147,218, 0.7)); background: linear-gradient(rgba(80,160,214,0.5), rgba(43,147,218, 0.7));
    border-radius: 5px;
    border: 1px solid #2b93da;
    box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px 1px rgba(0,0,0,0.1);
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; /* Font styles */
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3); font-size: 16px; font-weight: bold; font-family: 'Raleway', 'Lato', Arial, sans-serif; }
.ceshis:hover { box-shadow: inset 0 1px rgba(255,255,255,0.2),  inset 0 20px 30px rgba(80,160,214,0.5); }

.no-boxshadow .form-4 input[type=button]:hover { background: #594642; }
.form-4 label { display: none; padding: 0 0 5px 2px; cursor: pointer; }
.form-4 label:hover ~ input { border-color: #333; }
.no-placeholder .form-4 label { display: block; }

.QR-Code{float:left; width:250px; margin-top:50px; position:relative; display:inline-block;}
.QR-Code img{width:145px; height:145px; box-shadow: 5px 5px 0 rgba(0,0,0,0.5),  inset 0 1px 1px rgba(0,0,0,0.9);}
.QR-Code img:hover{width:150px; height:150px;}
.QR-Code .t{font-size:18px; margin-bottom:15px;}
.QR-Code .text{margin:10px 0; width:210px;  position:absolute; top:180px;}
.QR-Code  p{line-height:20px; text-shadow: 0 1px 1px rgba(255, 255, 255, 1); font-weight:bold; color:#333;}
.form-box{float:right; width:300px; padding:20px 10px; display:inline-block; background:rgba(0,0,0,0.2); border-radius:5px;}

.form-message { width: 100%; height: 20px; margin-right: auto; margin-left: auto; margin-bottom:10px; }
/*.form-error-text { background: url("../Images/validatebox_warning.png") no-repeat 10px 5.5px rgb(248, 202, 215); border-radius: 4px; border: 1px solid rgb(238, 134, 164); height: 26px; color: rgb(157, 42, 22); line-height: 26px; padding-left: 35px; font-family: Microsoft Yahei; }*/
/*.form-warning-text { background: url("../Images/Icon16/bullet_error.png") no-repeat 10px 5.5px rgb(253, 247, 206); border-radius: 4px; border: 1px solid rgb(248, 225, 68); height: 26px; color: rgb(0, 0, 0); line-height: 26px; padding-left: 35px; font-family: Microsoft Yahei; }*/
/*.form-succeed-text { background: url("../Images/loading1.gif") no-repeat 10px 5.5px rgb(98, 182, 0); border-radius: 3px; border: 1px solid rgb(94, 136, 0); height: 26px; color: rgb(255, 255, 255); line-height: 26px; padding-left: 35px; font-family: Microsoft Yahei; }*/

footer{ color: ghostwhite;background: #2e3b47; font-family: Microsoft Yahei; line-height: 80px; margin-top: -80px; position: absolute; text-align: center; top: 100%; width: 100%;}





.biaoge
{height:50px;
}

.denglubiaoti
{
    height:50px;
    line-height:50px;
    text-align:center;
    background-color:#7CD5FF;
    font-family:Microsoft YaHei;
    font-size:24px;
    border-radius: 3px;
}



.denglu
{
    height:50px;
    line-height:50px;
    text-align:center;
    font-family:Microsoft YaHei;
    font-size:24px;
    border-radius: 3px;
    cursor:pointer;
}



.dengluguanli
{
    color:#fff;
    height:50px;
    line-height:50px;
    text-align:center;
    font-family:Microsoft YaHei;
    font-size:24px;
    color:#fff;
}

.fenge
{height:10px;
}